<template>
	<view class="padding">
		<view style="border-radius: 10upx;" v-if="bannerCardArr.length > 0">
			<swiper class="flex justify-center align-center swiper" circular :indicator-dots="true" :autoplay="true"
				indicator-active-color="#269AFB">
				<swiper-item v-for="(item,index) in bannerCardArr" :key="index"
					@click="toPage(`${item.toUrl}?examId=${item.id}`)">
					<view :style="{
							background:`linear-gradient(to right,${item.backGroundColor[0]},${item.backGroundColor[1]})`}"
						style="border-radius: 10upx;" class="text-center text-white padding">
						<view class="text-xl" style="letter-spacing: 5upx;">{{item.title}}</view>
						<view class="text-sm padding-top-xs">考试时间：{{item.timeSlot[0]}} - {{item.timeSlot[1]}}
						</view>
						<view class="flex align-start justify-center padding-top margin-bottom-lg">
							<view class="text-center flex align-center justify-center"
								style="font-size: 30upx; border: 3upx solid #fff;height: 60upx; width: 200upx;border-radius: 30upx;">
								立即考试
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view v-if="historyCardArr.length === 0" :style="{height:scrollHeight+'px'}"
			class="flex justify-center align-center">
			<u-empty mode="history" />
		</view>

		<!-- 考试记录 -->
		<view class="padding-top padding-bottom" v-if="historyCardArr.length > 0">
			<view class="text-xxxl" style="letter-spacing: 5upx;">{{'考试记录'}}</view>
		</view>


		<!-- 卡片集合 -->
		<scroll-view :scroll-y="true" v-if="historyCardArr.length > 0" :style="{height:scrollHeight+'px'}"
			@scrolltolower="scrolltolower">

			<view class="card margin-bottom" v-for="(item,index) in historyCardArr" :key="index">
				<view class="text-xl text-bold padding-top-sm padding-bottom-sm padding-left-sm"
					style="letter-spacing: 3upx;">{{item.title}}</view>
				<view class="under-line"></view>
				<view class="flex justify-around padding-top-sm text-center">
					<view>
						<view class="text-xxl">{{item.numbers[0]}}</view>
						<view class="text-sm" style="letter-spacing: 3upx;">总题数</view>
					</view>
					<view>
						<view class="text-xxl">{{item.numbers[1]}}</view>
						<view class="text-sm" style="letter-spacing: 3upx;">正确题数</view>
					</view>
					<view>
						<view class="text-xxl">{{item.numbers[2]}}</view>
						<view class="text-sm" style="letter-spacing: 3upx;">错误题数</view>
					</view>
				</view>

				<view class="padding-top-sm padding-bottom-sm flex justify-between align-center">
					<view class="flex justify-start align-center padding-left">
						<u-icon name="order" color="#bfbfbf" size="20"></u-icon>
						<view style="color: #bfbfbf;padding-left: 5upx;">{{item.examDate}}</view>
					</view>
					<view class="flex align-center" style="margin-left: -130rpx;">
						<image class="img" src="/static/exams/time.png" style="width: 30upx;height: 30upx;" alt="">
						</image>
						<view style="color: #bfbfbf;padding-left: 5upx;">{{item.timeSlot}}</view>
					</view>
					<view style="border-radius: 20upx 0% 0% 20upx;height: 50upx;width: 95upx;"
						:style="{backgroundColor:item.status.bgColor}" class="flex justify-center align-center">
						<view :style="{color:item.status.color}" class="text-sm">{{item.status.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		banner,
		history
	} from '@/api/exams.js'
	export default {
		data() {
			return {
				scrollHeight: 0,
				queryParams: {
					pageNo: 1,
					pageSize: 3,
				},
				options: {
					effect: 'ative',
					autoplay: true
				},
				bannerCardSize: {
					width: '100%',
					height: '200upx'
				},
				bannerCardArr: [],
				historyCardArr: []
			}
		},
		onBackPress() {
			uni.switchTab({
				url: '/pages/work/index'
			})
		},
		onUnload() {
			uni.switchTab({
				url: '/pages/work/index'
			})
		},
		onReady() {
			const that = this
			this.getBanner()
			this.getHistory()
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					let wHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH = uni.createSelectorQuery().select(".swiper"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data => {
						that.scrollHeight = wHeight - data - 180 //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})
		},
		methods: {
			toPage(toUrl) {
				uni.navigateTo({
					url: toUrl
				})
			},
			scrolltolower() {
				this.getHistory()
			},
			getBanner() {
				banner().then(res => {
					this.bannerCardArr = res.data
				})
			},
			getHistory() {
				this.$modal.loading("加载中")
				history(this.queryParams).then(res => {
					this.historyCardArr = [...this.historyCardArr, ...res.data.list]
					if (res.data.list.length > 0) {
						this.queryParams.pageNo += 1
					}
					this.$modal.closeLoading()
				}).finally(() => {
					this.$modal.closeLoading()
				})
			}

		}

	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		color: #ffffff;
	}

	.card {
		width: 98%;
		margin-left: 1%;
		margin-top: 20upx;
		border-radius: 10upx;
		box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 3px 0 rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
	}

	.under-line {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 2.5%;
			width: 95%;
			height: 1px;
			background-color: #e1e1e1;
		}
	}
</style>